<template>
  <div style="padding-bottom: 10px">
    <el-table v-loading="listLoading" :data="StoreList">
      <el-table-column
        align="center"
        label="店铺或账号ID"
        prop="BindStoreID"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        align="center"
        prop="ProductName"
        label="店铺/账号类型"
        width="200"
      />
      <el-table-column align="center" prop="BindStoreAccount" label="账号" />
      <el-table-column align="center" label="服务期限">
        <template #default="{ row }">
          {{ row.ServiceStartDate }} 至 {{ row.ServiceEndDate }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="链接" width="200">
        <template #default="{ row }">
          <el-button size="small" @click="handleEdit(row)">链接</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default defineComponent({
    name: 'ShopList',
    setup() {
      const state = reactive({
        OrderID: 0,
        StoreList: [],
        title: '',
      })

      const showList = (OrderInfo, list) => {
        state.OrderID = OrderInfo.OrderID
        state.OrderFlowState = Math.abs(OrderInfo.OrderFlowState)
        state.StoreList = list
      }

      return {
        ...toRefs(state),
        showList,
      }
    },
  })
</script>
